<template>
  <div class="score-wrapper">
    <div class="header">
      <div class="title-wrapper">
        <img
          src="@/assets/icons/home_live_item_left_icons.webp"
          alt="left decoration"
          class="decor-img"
        />
        <div class="title">
          <img src="@/assets/icons/home_live_item_title_bg.webp" class="bg" />
          <h2>即时比分</h2>
        </div>

        <img
          src="@/assets/icons/home_live_item_right_icons.webp"
          alt="right decoration"
          class="decor-img"
        />
      </div>
      <div class="tabs">
        <button
          v-for="(tab, index) in tabs"
          :key="index + 'tabs'"
          :class="{ active: index === activeTab }"
          @click="() => setActiveTab(index)"
        >
          {{ tab.score }}
        </button>
      </div>
      <!-- <button class="more-button">查看更多直播 ></button> -->
    </div>
    <div class="bottom">
      <div class="score-container">
        <div class="score-header">
          <div>
            <span
              class="score-tab"
              :class="dateTab === 0 && 'active'"
              @click="() => dateChangeHandle(0)"
              >昨天({{ data.lastTotalSize }})</span
            >
            <span
              class="score-tab"
              :class="dateTab === 1 && 'active'"
              @click="() => dateChangeHandle(1)"
              >今天({{ data.totalSize }})</span
            >
            <span
              class="score-tab"
              :class="dateTab === 2 && 'active'"
              @click="() => dateChangeHandle(2)"
              >明天({{ data.tomorrowTotalSize }})</span
            >
          </div>
          <!-- <div class="right">
            <button class="score-sort-time active">按时间</button>
            <button class="score-sort-league">按联赛</button>
          </div> -->
        </div>

        <div class="score-match-list">
          <div class="score-match" v-for="match in matches" :key="match.id">
            <div class="top" @click="() => goDetail(match)">
              <div class="score-match-info">
                <div class="league">
                  <img :src="match.leagueLogo" class="league-icon" />
                  <span class="league-name">{{ match.leagueName }}</span>
                </div>
                <div class="time">
                  <span class="score-time">{{ formatTime(match.matchTime, 'HH:mm') }}</span>
                  <span class="score-date">{{ formatTime(match.matchTime, 'MM:DD') }}</span>
                </div>

                <span class="score-status">{{ match.statusLable }}</span>
              </div>
              <div class="score-teams">
                <div class="score-team">
                  {{ match.hostTeamName }}
                </div>
                <div class="score-result">
                  <img :src="match.hostTeamLogo" />
                  <span class="num" v-show="[2, 3].includes(match.status)">
                    {{ match.hostTeamScore }} - {{ match.guestTeamScore }}
                  </span>
                  <span class="num" v-show="![2, 3].includes(match.status)"> - </span>
                  <img :src="match.leagueLogo" />
                </div>
                <div class="score-team">
                  {{ match.leagueName }}
                </div>
              </div>
              <div class="anchor">
                <!-- <div class="anchor-icon">
                <img
                  v-show="match?.anchorList"
                  :src="match?.anchorList && match?.anchorList[0].headImageUrl"
                />
              </div> -->

                <!-- <span class="score-streamer">主播{{ match?.anchorList?.length }}</span> -->
                <img
                  src="@/assets/icons/score/animation-active.webp"
                  class="icon"
                  v-show="hasAnimation(match)"
                />
                <img
                  src="@/assets/icons/score/video-active.webp"
                  class="icon"
                  v-show="hasVideo(match)"
                />
              </div>
            </div>

            <!-- <div class="score-match-stats">
            <div class="score-stats-bar">
              <div class="score-stats-home">主队3胜</div>
              <div class="score-stats-draw">2平</div>
              <div class="score-stats-away">2负</div>
            </div>
            <div class="score-rankings">
              <div class="score-ranking-home">6 排名</div>
              <div class="score-ranking-away">1 排名</div>
            </div>
          </div> -->
          </div>
        </div>
      </div>
      <div class="data">
        <ScoreData></ScoreData>
        <scorePerson></scorePerson>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import { getMatchList } from '@/api/home'
import ScoreData from './score-data.vue'
import scorePerson from './score-person.vue'
import dayjs from 'dayjs'
import router from '@/router'
const activeTab = ref(1)
const dateTab = ref(1)
const date = ref(dayjs().format('YYYY-MM-DD'))
const tabs = ref([
  { score: '全部比分', filter: '' },
  { score: '足球比分', filter: 1 },
  { score: '篮球比分', filter: 2 },
  { score: '网球比分', filter: 5 },
  { score: '棒球比分', filter: 3 }
])
let data = reactive({})
let timeId = ref(null)
const setActiveTab = (index) => {
  activeTab.value = index
  getData()
}
const goDetail = (match) => {

}
const dateChangeHandle = (index) => {
  dateTab.value = index
  switch (index) {
    case 0:
      date.value = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
      break
    case 1:
      date.value = dayjs().format('YYYY-MM-DD')
      break
    case 2:
      date.value = dayjs().add(1, 'day').format('YYYY-MM-DD')
      break
  }
  getData()
}
const getData = async () => {
  try {
    matches.value = []
    // let date = dayjs().format('YYYY-MM-DD')
    const res = await getMatchList({
      sportId: tabs.value[activeTab.value].filter.toString(),
      date: date.value
    })
    console.log(res, 'res')
    if (res.code === 200) {
      data = res.data

      matches.value = matches.value
        .concat(res.data.going)
        .concat(res.data.uncoming)
        .concat(res.data.finished)
    }
  } catch (error) {
    console.log(error, 'error')
  }
}
const hasVideo = (match) => {
  if (match.hasLive === 1) {
    return true
  } else {
    return false
  }
}
const hasAnimation = (match) => {
  if (match.hasLive === 1) {
    return false
  } else if (match.lmtMode === 1) {
    return true
  } else {
    return false
  }
}
const goLiveDetai = (match) => {}
onMounted(() => {
  getData()
  timeId.value = setInterval(() => {
    getData()
  }, 30000);
})

onUnmounted(() => {
  clearInterval(timeId.value)
  timeId.value = null
})
const matches = ref([
  // Add match data here
])
const formatTime = (num, format) => {
  return dayjs(num).format(format)
}
</script>
<style lang="scss" scoped>
.score-wrapper {
  margin-bottom: 50px;
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;

    .title-wrapper {
      display: flex;
      align-items: center;
      //   background-image: url('background-image.jpg'); /* 背景图片 */
      //   background-size: cover;
      //   background-position: center;
      //   padding: 10px 20px;
      //   border-radius: 10px;
      width: 100%;
      padding: 90px 0 40px;
      //   max-width: 800px;
      //   position: relative;

      .title {
        position: relative;
        display: flex;
        align-content: center;
        justify-content: center;
        margin: 0 15px;

        .bg {
          width: 340px;
          height: 58px;
          position: relative;
          top: -20px;
        }
        h2 {
          // font-size: 24px;
          //   margin: 0 10px;
          // color: white; /* 文字颜色根据背景图片调整 */
          z-index: 1;
          font-family:
            PingFang SC,
            PingFang SC;
          font-weight: 600;
          font-size: 40px;
          color: #525a79;
          position: absolute;
          bottom: 0;
          &::after {
            content: '';
            position: absolute;
            bottom: -17px;
            left: 50%;
            margin-left: -30px;
            width: 60px;
            height: 10px;
            background: linear-gradient(150deg, #2cea3d 16%, #22d13c 49%, #17b33b 100%);
            box-shadow: 0px 4px 8px 0px rgba(0, 255, 10, 0.25);
            border-radius: 8px 8px 8px 8px;
          }
        }
      }
      .decor-img {
        // width: 20px; /* 根据需要调整图片大小 */
        height: auto;
        width: 515px;
        flex: 1;
      }
    }

    .tabs {
      display: flex;
      gap: 10px;
      margin: 10px 0;

      button {
        // padding: 10px 15px;
        border: none;
        border-radius: 20px;
        // background-color: #f5f5f5;
        cursor: pointer;
        outline: none;
        font-size: 16px;
        background: url('@/assets/icons/home_live_item_btn_bg.webp') no-repeat;
        width: 120px;
        height: 40px;
        background-size: 100% 100%;
        color: #525a79;
        // cursor: pointer;
        &.active {
          background: url('@/assets/icons/home_live_active_item_btn_bg.webp') no-repeat;
          background-size: 100% 100%;
          color: #ffffff;
        }
      }
    }

    .more-button {
      background: none;
      //   border: none;
      color: #949cbd;
      border: none;
      border-radius: 20px;
      cursor: pointer;
      width: 160px;
      height: 38px;
      background: url('@/assets/icons/home_live_item_more_btn.webp') no-repeat;
      background-size: 100% 100%;
      margin-top: 10px;
    }
  }
  .bottom {
    display: flex;
    .score-container {
      width: 960px;
      border-radius: 10px;
      overflow: hidden;
      background-color: #ffff;
      margin: 0 auto;

      .score-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 20px;

        .score-tab {
          margin-right: 20px;
          // font-size: 14px;
          // color: #666;
          font-weight: 500;
          font-size: 18px;
          color: #afb8cb;
          cursor: pointer;
          &.active {
            color: #4caf50;
          }
        }
        .right {
          width: 130px;
          height: 28px;
          background: #e1e7ff;
          border-radius: 20px 20px 20px 20px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .score-sort-time,
        .score-sort-league {
          background: none;
          border: none;
          color: #afb8cb;
          // color: #4caf50;
          cursor: pointer;
          font-weight: 400;
          font-size: 14px;
          color: #afb8cb;
          width: 68px;
          height: 28px;
          &.active {
            width: 68px;
            height: 28px;
            background: #16b13a;
            color: #fff;
            border-radius: 20px 20px 20px 20px;
          }
        }
      }

      .score-match-list {
        // border-top: 1px solid #e2eeff;
        margin-top: 30px;
        // height: 1000px;
        overflow: scroll;
        .score-match {
          background: #fff;
          // padding: 20px;
          // border-radius: 10px;
          padding: 0px 20px;
          // margin-bottom: 20px;
          height: 50px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border-bottom: 1px solid #e2eeff;
          .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;

            .score-match-info {
              display: flex;
              align-items: center;
              .league {
                display: flex;
                align-items: center;
                .league-icon {
                  width: 30px;
                }
                .league-name {
                  font-weight: 500;
                  font-size: 14px;
                  color: #525a79;
                  width: 100px;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                  margin-left: 10px;
                }
              }
              .time {
                display: flex;
                flex-direction: column;
                justify-content: center;
                font-weight: 400;
                font-size: 14px;
                color: #525a79;
                margin-left: 31px;
                .score-time {
                  font-size: 14px;
                }
                .score-date {
                  font-size: 12px;
                  color: #afb8cb;
                }
              }
              .score-status {
                font-weight: 400;
                font-size: 14px;
                color: #e95d5d;
                margin-left: 31px;
                width: 100px;
              }
            }

            .score-teams {
              display: flex;
              align-items: center;
              justify-content: center;
              .score-team {
                margin-left: 10px;
                font-size: 14px;
                font-weight: 400;
                // font-size: 18px;
                color: #525a79;
                width: 100px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }

              .score-result {
                margin: 0 10px;
                font-weight: 500;
                font-size: 18px;
                color: #e95d5d;
                display: flex;
                align-items: center;
                // width: 150px;
                justify-content: center;
                img {
                  width: 20px;
                  height: 20px;
                  margin: 0 5px;
                }
                .num {
                  width: 80px;
                  text-align: center;
                }
              }
            }

            .score-watch {
              background: #4caf50;
              border: none;
              color: #fff;
              padding: 5px 10px;
              border-radius: 5px;
              cursor: pointer;
            }
            .anchor {
              display: flex;
              align-items: center;
              width: 50px;
              img {
                // width: 20px;
                // height: 20px;
                // border-radius: 30px;
              }
              .anchor-icon {
                // width: 20px;
                // height: 20px;
              }
              .score-streamer {
                // margin-left: 20px;
                font-weight: 400;
                font-size: 14px;
                color: #afb8cb;
                width: 60px;
                text-align: center;
              }
              .icon {
                width: 25px;
                margin-left: 20px;
              }
            }
          }

          .score-match-stats {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;

            .score-stats-bar {
              display: flex;
              align-items: center;

              .score-stats-home,
              .score-stats-draw,
              .score-stats-away {
                margin-right: 10px;
              }
            }

            .score-rankings {
              display: flex;
              justify-content: space-between;

              .score-ranking-home,
              .score-ranking-away {
                margin-right: 20px;
              }
            }
          }
        }
      }
    }
    .data{
      width: 400px;
    }
  }
}
</style>
